<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="../../static/css/bootstrap.min.css">
	<link rel="stylesheet" href="../../static/css/ylb.css">
	<link rel="shortcut icon" href="../../static/img/logo.png">
	<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
	<script type="text/javascript" src="../../static/js/popper.min.js"></script>
	<script type="text/javascript" src="../../static/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../../static/js/qrcode.min.js"></script>
	<script type="text/javascript" src="./openApi.js"></script> 
</head>
<body>

<div id="app">
	
	<!-- 左侧 -->
	<div class="left">
		<div class="dhview">

			<!-- LOGO -->
			<a href="../index/" class="index">
			    <div class="logo"></div>
			</a>

			<!-- 导航 -->
			<ul>
			    <a href="../index/" >
			    <li class="nav-li">
			        <i class="icon i-data"></i>
			        <span class="nav-text">数据</span>
			    </li>
			    </a>
			    
			    <a href="../qun/">
			    <li class="nav-li">
			        <i class="icon i-hm"></i>
			        <span class="nav-text">活码</span>
			    </li>
			    </a>
			    
				<a href="../dwz/" class="selected">
				<li class="nav-li">
				    <i class="icon i-dwz-dark"></i>
				    <span class="nav-text">短网址</span>
				</li>
				</a>
				
				<a href="../tbk/">
				<li class="nav-li">
				    <i class="icon i-tbk"></i>
				    <span class="nav-text">淘宝客</span>
				</li>
				</a>
				
				<a href="../shareCard/">
				<li class="nav-li">
				    <i class="icon i-share"></i>
				    <span class="nav-text">分享卡片</span>
				</li>
				</a>
				
				<a href="../plugin/">
				<li class="nav-li">
				    <i class="icon i-plugin"></i>
				    <span class="nav-text">插件中心</span>
				</li>
				</a>
				
				<a href="../kami/">
				<li class="nav-li">
				    <i class="icon i-kami"></i>
				    <span class="nav-text">卡密分发</span>
				</li>
				</a>
				
				<a href="../config/">
				<li class="nav-li">
				    <i class="icon i-config"></i>
				    <span class="nav-text">配置中心</span>
				</li>
				</a>
				
				<a href="../sucai/">
				<li class="nav-li">
				    <i class="icon i-sucai"></i>
				    <span class="nav-text">素材管理</span>
				</li>
				</a>
				
				<a href="../user/">
				<li class="nav-li">
				    <i class="icon i-account"></i>
				    <span class="nav-text">账号管理</span>
			    </li>
			    </a>
			</ul>

			<!-- 账号 -->
			<div class="account">加载中...</div>
		    
		</div>
	</div>

	<!-- 右侧 -->
	<div id="right">
	    
		<h3>
		    <a href="./" class="mianbaoxie_a">短网址</a> ➜ <span class="mbx">开放API</span>
		    <span id="channel_title" style="float:right;"></span>
		</h3>
		
		<div class="data-card">

			<!-- 按钮区域 -->
			<div class="button-view" id="button-view" style="display:none;">
			    
			    <!--flex布局按钮容器-->
    			<div class="flex-button-view">
    			    
    			    <!--导航-->
    			    <div class="button-daohang">
    			        <a href="./"><div class="back-lastpage"></div></a>
    			        <button class="default-btn" style="margin-left:5px;">ApiKey</button>
    			    </div>
    			    
    			    <!--功能-->
    			    <div class="button-gongneng">
    			        <a href="javascript:;"><button class="tint-btn" data-toggle="modal" data-target="#creatApiKeyModal" onclick="initialize_creatApiKey();" style="margin-left:5px;">创建ApiKey</button></a>
    			        <a href="./apiDoc.html"><button class="tint-btn" style="margin-left:5px;">开发文档</button></a>
    			        <div style="float:right;display:flex;">
        			        <form id="checkApiKey">
        			            <input type="text" class="form-control" style="flex:1;" name="apikey" placeholder="输入你要查询的ApiKey" />
        			        </form>
        			        <button type="button" class="tint-btn" style="width: 65px;height:36px;margin-left:8px;" onclick="checkApiKey()">查询</button>
        			    </div>
    			    </div>
    			</div>
			</div>

			<!-- 列表区域 -->
			<div class="data-list">
				<table class="table">
				    <thead></thead>
				    <tbody></tbody>
				</table>
			</div><!-- data-list -->
			
			<p class="loading" style="display: none;"></p>
			
			<!-- 分页 -->
			<div class="fenye"></div>
			
		</div><!-- data-card -->
	</div><!-- right -->
	
	<!-- 创建ApiKey -->
    <div class="modal fade" id="creatApiKeyModal">
        <div class="modal-dialog">
            <div class="modal-content">
                
                    <!-- 头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">创建ApiKey</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div><!-- modal-header -->
                    
                    <!-- 表单 -->
                    <div class="modal-body">
                        <form id="creatApiKey">
                        <span class="text">用户名 <span style="float:right;cursor:pointer;" onclick="randUserName();">随机生成</span></span>
                        <input type="text" name="apikey_user" class="form-control" id="apikey_user" autocomplete="off" placeholder="给用户创建一个名称">
                        
                        <span class="text">IP白名单</span>
                        <input type="text" name="apikey_ip" class="form-control" title="设置后仅该IP可请求" id="apikey_ip" autocomplete="off" placeholder="输入IP地址，不设白名单留空">
                        
                        <span class="text">到期时间</span>
                        <input type="date" name="apikey_expire" class="form-control" id="apikey_expire" title="到这一天就无法请求，想永久就设置久一点" placeholder="请选择到期时间">
                        
                        </form>
                    </div><!-- modal-body -->
                    
                    <!-- 底部操作 -->
                    <div class="modal-footer">
                        <div class="footer-btn">
                        <div class="faqnav">
                            <span class="faq"><a href="#">?</a></span>
                        </div>
                        <div class="btnnav">
                            <button type="button" class="default-btn" onclick="creatApiKey();">立即创建</button>
                        </div>
                    </div>
                </div><!-- modal-footer -->
                <!-- 操作反馈 -->
                <div class="result"></div>
            </div><!-- modal-content -->
        </div><!-- modal-dialog -->
    </div><!-- creatApiKeyModal -->
    
    <!-- 编辑ApiKey -->
    <div class="modal fade" id="EditApiKeyModal">
        <div class="modal-dialog">
            <div class="modal-content">
                
                    <!-- 头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">编辑ApiKey</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div><!-- modal-header -->
                    
                    <!-- 表单 -->
                    <div class="modal-body">
                        <form id="editApiKey">
                        <span class="text">ApiKey <span style="float:right;cursor:pointer;" onclick="randApiKey();">随机生成</span></span>
                        <input type="text" name="apikey" class="form-control" title="可修改重置ApiKey" id="apikey_edit" autocomplete="off" maxlength="15" placeholder="设置ApiKey，建议10位">
                        
                        <span class="text">ApiSecrete <span style="float:right;cursor:pointer;" onclick="randApiSecrete();">随机生成</span></span>
                        <input type="text" name="apikey_secrete" class="form-control" title="可修改重置ApiSecrete，最大32位" id="apikey_secrete_edit" maxlength="32" autocomplete="off" placeholder="设置ApiSecrete，建议32位">
                        
                        <span class="text">IP白名单</span>
                        <input type="text" name="apikey_ip" class="form-control" title="设置后仅该IP可请求" id="apikey_ip_edit" autocomplete="off" placeholder="输入IP地址，不设白名单留空">
                        
                        <span class="text">请求配额</span>
                        <input type="text" name="apikey_quota" class="form-control" title="用户可以请求API的次数" id="apikey_quota_edit" autocomplete="off" maxlength="20" placeholder="输入数量以分配给用户可请求的次数">
                        
                        <span class="text">请求次数</span>
                        <input type="text" name="apikey_num" class="form-control" title="用户已经请求API的次数，如需清零请输入0" id="apikey_num_edit" autocomplete="off" maxlength="20" placeholder="输入数量以修改请求次数">
                        
                        <span class="text">到期时间</span>
                        <input type="date" name="apikey_expire" class="form-control" title="到这一天就无法请求，想永久就设置久一点" id="apikey_expire_edit" placeholder="请选择到期时间">
                        
                        <span class="text" style="display:block;">状态</span>
                        <select name="apikey_status" class="form-control" id="apikey_status_edit"></select>
                        
                        <!--隐藏域-->
                        <input type="hidden" name="apikey_id" id="apikey_id_edit">
                        
                        </form>
                    </div><!-- modal-body -->
                    <!-- 底部操作 -->
                    <div class="modal-footer">
                        <div class="footer-btn">
                        <div class="faqnav">
                            <span class="faq"><a href="#">?</a></span>
                        </div>
                        <div class="btnnav">
                            <button type="button" class="default-btn" onclick="editApiKey();">提交更新</button>
                        </div>
                    </div>
                </div><!-- modal-footer -->
                <!-- 操作反馈 -->
                <div class="result"></div>
            </div><!-- modal-content -->
        </div><!-- modal-dialog -->
    </div><!-- EditApiKeyModal -->
    
    <!-- 确定删除ApiKey -->
    <div class="modal fade" id="DelApiKeyModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 头部 -->
                <div class="modal-header">
                    <h4 class="modal-title">删除ApiKey</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div><!-- modal-header -->
                <!-- 内容 -->
                <div class="modal-body">
                    将会删除该ApiKey！删除后无法请求API！
                </div><!-- modal-body -->
                <!-- 底部操作 -->
                <div class="modal-footer"></div><!-- modal-footer -->
                <!-- 操作反馈 -->
                <div class="result"></div>
            </div><!-- modal-content -->
        </div><!-- modal-dialog -->
    </div><!-- DelApiKeyModal -->
    
    <!-- 全局信息提示框 -->
    <div id="notification">
        <div id="notification-text"></div>
    </div>

</div><!-- app -->

</body>
</html>